<#include "../base.ftl"/>

<#macro title>
    JqGrid示例代码
</#macro>

<#macro cssfile>
<link
    href="libs/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet">
</#macro>    

<#macro scriptfile>
<!-- 代码显示用 -->
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shCore.js"></script>  
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>

</#macro>

<#macro breadcrumb>
    <ul class="breadcrumb">
     <li><a href="index.html">Home</a> <span class="divider">/</span></li>
     <li class="active">JqGrid示例代码</li>
    </ul>
</#macro>

<#macro main>
    <div class="row-fluid">
        <div class="block">
            <a data-toggle="collapse" class="block-heading" href="#page-stats">示例代码</a>
            <div id="page-stats" class="block-body in collapse" style="height: auto;"></a>
                <div class="stat-widget-container">
                     <div class="stat-widget">
                        基本示例
                    </div>
                    <div class="stat-widget">
                       使用字典
                    </div>
                </div>
             </div>
        </div>
        
        <div class="row-fluid">
            <section id="gridExample">
                <div class="page-header">
                    <h1>基本示例</h1>
                </div>
                <p>信息描述</p>
            </section>
            
            <section id="dictExample">
                <div class="page-header">
                    <h1>使用字典</h1>
                </div>
                <p>在列表中经常会使用到一些字典表的内容，在进行新增、修改和显示时，我们希望显示的是字典的名字而非字典的值。
                                    通过如下的设置我们可以在列表的查询语句不和字典表进行关联。而只要在jqGrid的代码中设置相关的字典Class，
                                    就能够实现自动的映射转换，同时在新增和修改时将字典项的输入框变更为select框。
                </p>
                <p>在JqGrid的初始参数设置中增加两个参数：<code>dictUrl</code>和<code>dictCode</code>。
                   <code>dictUrl</code>表示请求字典的Url地址，默认为：optionList!options.action
                   <code>dictCode</code>表示需要请求的字典Code，是一个数组，意味着可以一次提交多个code的请求
                   </p>
                <pre name="code" class="js">
                  //字典的url
                  dictUrl : 'optionList!options.action',
                  //字典的key
                  dictCode: ["status","type"],
                </pre>
                <p>
                                    在colModel的定义中增加<code>dictCode</code>的设置。针对每个column，可以设定一个对应的字典Code
                </p>
                <pre name="code" class="js">
                {  
                    name : 'isDelete',  
                    jsonmap : 'IS_DELETE',  
                    index : 'IS_DELETE',  
                    editable: true, 
                    edittype:'select',
                    formatter:'select',
                    editoptions:{dictCode:"status"}
                }
                </pre>
            </section>
            
            <section id="exportExample">
                <div class="page-header">
                    <h1>导出列表</h1>
                </div>
                <p>通过自定义按钮提供导出列表功能，可以根据在Yaml中设置导出字段，自动导出xls文件</p>
                <pre name="code" class="js">
                    $("#gridTable").navButtonAdd('#gridPager',{
                        caption: "",
                        title:"下载",
                        buttonicon : "ui-icon-arrowthick-1-s",
                        onClickButton: function(){
                            downloadFile("list/admin/userList/listexport.html",{dict_IS_DELETE:status,dict_SRC_TYPE:type});
                        },
                        position:"last"
                    });
                </pre>
                <p><code>list/admin/userList/listexport.html</code>表示我们请求的导出地址。地址的解析情况如下：</p>
                <p><code>list</code>固定地址 </p>
                <p><code>/admin/userList</code>表示在/list/admin目录的sql.yaml中userList标签</p>
                <p><code>listexport.html</code>固定地址</p>
                <p><code>{dict_IS_DELETE:status,dict_SRC_TYPE:type}</code>表示需要使用字典转换的字段，<code>dict_</code>为前缀，后面加上字段名（大写），值为对应的字典Code
                <code>dict_IS_DELETE:status</code>表示需要转换的字段名是<code>IS_DELETE</code>，转换对应的字典Code是<code>status</code> 。
            </section>
            
            <section id="gridExample">
                <div class="page-header">
                    <h1>基本示例</h1>
                </div>
                <p>信息描述</p>
            </section>
        </div>
    </div>
</#macro>

<#macro jsscript>
dp.SyntaxHighlighter.ClipboardSwf = 'libs/dp.SyntaxHighlighter/Scripts/clipboard.swf';  
dp.SyntaxHighlighter.HighlightAll('code');  
</#macro>    